<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性操作</title>
</head>

<body>
    <button id="btn1">李昊哲</button><button id="btn2">刘晓兰</button>
    <br>
    <img id="photo" src="./img/01.png" width="300px" alt="">
</body>

</html>
<script>
    // 1、获取页面元素
    let lihaozhe = window.document.querySelector('#btn1');
    let liuxiaolan = window.document.querySelector('#btn2');
    let photo = window.document.querySelector('#photo');
    // 2、页面元素绑定并触发事件
    lihaozhe.onmouseover = function() {
        // 3、页面元素事件触发后修改页面元素属性
        photo.src = './img/01.png';
    };
    liuxiaolan.onmouseover = function() {
        // 3、页面元素事件触发后修改页面元素属性
        photo.src = './img/head.jpg';
    };
</script>